<template>
  <div class="headbox6_10" :class="newBool == false ? 'active' : ''">
    <!-- <img src="../assets/images/logo.png" alt class="headboximg6_10" /> -->
    <span class="headbox6_10_span" @click="handHui"
      ><div class="hui" style="width: 20px; height: 17.5px">
        <img
          v-if="newBool == true"
          style="width: 100%; height: 100%"
          src="../assets/images/guan.png"
        />
        <img
          v-if="newBool == false"
          style="width: 100%; height: 100%"
          src="../assets/images/asideOpen.png"
        />
      </div>
      <!-- <p style="float:left">欢迎来到增值业务管理系统</p> -->
    </span>
    <div class="contents" style="width: 250px; float: left; line-height: 50px">
      <p style="font-size: 18px">WLECOME TO IMAGINE_WEB</p>
    </div>
    <div class="rights">
      <div class="singOut" @click="jumpMeInfo" v-if="false">
        <img
          style="width: 16px; height: 16px; margin-right: 4px"
          src="../assets/images/users.png"
        />{{ title }}
      </div>

      <div
        @click="
          dialogVisible = true;
          nowPsw = '';
          newPsw = '';
          aginPsw = '';
        "
        class="singOut"
        v-if="false"
      >
        <img
          style="width: 16px; height: 16px; margin-right: 4px"
          src="../assets/images/locks.png"
        />修改密码
      </div>
      <div
        @click="handleCommand(1)"
        style="cursor: pointer; color: #545c75; margin-right: 30px"
        v-if="false"
      >
        <img
          style="width: 16px; height: 16px; margin-right: 4px; margin-top: -3px"
          src="../assets/images/out.png"
        />退出
      </div>
      <div
        style="margin-right: 30px"
        class="authenticationStatus"
        v-if="jurisdiction != 2"
      >
        实名状态 :
        <div
          class="subTitle"
          @click="statusUrl"
          v-if="authenticationStatus == 0"
        >
          <img src="../assets/images/yishiming.png" alt="" />
        </div>
        <div
          class="subTitle"
          @click="statusUrl"
          v-if="authenticationStatus == 1"
        >
          <img src="../assets/images/weishiming.png" alt="" />
        </div>
      </div>
      <el-dropdown @command="handleClicks" style="margin-right: 60px">
        <span class="el-dropdown-link" style="color: black">
          <img
            src="../assets/images/headTo.png"
            style="margin-right: 8px"
            alt=""
          />
          {{ name
          }}<i
            class="el-icon-arrow-down el-icon--right"
            style="color: black"
          ></i>
        </span>
        <el-dropdown-menu slot="dropdown" style="width: 240px !important">
          <el-dropdown-item command="getName" class="lines">
            <!-- <div class="headers" style="font-size:16px">
              <img src="../../src/assets/images/onePic.png" width="12px" height="12px" style="margin-right:5px" alt=""> {{name}} <img style="margin-left:10px;margin-top:-5px" src="../assets/images/icon_up_right.png" alt="">
            </div> -->
            <div style="margin-top: -3px" class="txtLine">
              <img
                src="../../src/assets/images/onePic.png"
                width="12px"
                height="12px"
                style="margin-right: 5px"
                alt=""
              />
              {{ topUserName }}
            </div>
            <div style="margin-top: -10px; text-indent: 18px" class="txtLine">
              {{ phone }}
            </div>
            <div
              style="margin-top: -10px; text-indent: 18px"
              v-if="jurisdiction != 2"
              class="txtLine"
            >
              邀请码 {{ developCode }}
            </div>

            <!-- <div style="text-indent:17px">
              大家好
            </div> -->
          </el-dropdown-item>
          <!-- <el-dropdown-item command="ma"><img src="../../src/assets/images/codeYao.png"  width="12px" height="12px" style="margin-right:5px" alt=""> 邀请码 {{developCode}}</el-dropdown-item> -->
          <!-- <el-dropdown-item command="getPhone">{{ phone }}</el-dropdown-item> -->
          <el-dropdown-item command="setPSW" class="lines"
            ><img
              src="../../src/assets/images/rightPic.png"
              width="12px"
              height="12px"
              style="margin-right: 5px"
              alt=""
            />
            修改密码</el-dropdown-item
          >
          <el-dropdown-item command="signOut">
            <img
              src="../../src/assets/images/bankLogin.png"
              width="12px"
              height="12px"
              style="margin-right: 5px"
              alt=""
            />
            退出</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <!-- </div> -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="500px"
      append-to-body
      title="修改密码"
    >
      <div style="margin-left: -40px">
        <div class="setPsw">修改密码</div>
        <div class="pswList">
          <div class="lable">当前密码:</div>
          <el-input
            class="kuang"
            v-model="nowPsw"
            show-password
            maxlength="16"
            type="password"
            placeholder="当前登录密码"
          ></el-input>
        </div>
        <div class="pswList">
          <div class="lable">新密码:</div>
          <el-input
            class="kuang"
            v-model="newPsw"
            show-password
            maxlength="16"
            type="password"
            placeholder="请输入新密码"
          ></el-input>
        </div>
        <div class="pswList" style="margin-bottom: 10px">
          <div class="lable">确认密码:</div>
          <el-input
            class="kuang"
            v-model="aginPsw"
            type="password"
            maxlength="16"
            show-password
            placeholder="请再次输入新密码"
          ></el-input>
        </div>
        <div class="requirement">
          <p style="color: #fb932b">密码必须包含字母和数字，密码长度8~16位</p>
          <!-- <p style="color:#FB932B"></p> -->
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

 <script>
import axios from "axios";
import { date } from "../assets/js/commion";
import BUS from "../assets/js/bus"
export default {
  data() {
    return {
      title: localStorage.getItem("name"),
      bools: false,
      nowDate: null, //当前时间
      nowPsw: "", //当前密码
      newPsw: "", //新密码
      aginPsw: "", //再次输入新密码
      dialogVisible: false,
      newBool: true,
      name: "",
      phone: "",
      authenticationStatus: "", //认证状态
      jurisdiction: "",
      topUserName: "", //登录用户名
      developCode: "", //邀请码
    };
  },
  mounted() {
    BUS.$on("updataInfo",()=>{
      this.authenticationStatus = localStorage.getItem("authenticationStatus");
    })
  },
  methods: {
    // 跳转认证页面
    statusUrl() {
      this.$router.push({
        name: "meMessage",
      });
    },
    //
    handleClicks(command) {
      // alert(command)
      var _this = this;
      if (command == "getName") {
        // this.$router.push({
        //   name:"noRealName"
        // })
      } else if (command == "setPSW") {
        this.dialogVisible = true;
        this.nowPsw = "";
        this.newPsw = "";
        this.aginPsw = "";
      } else if (command == "signOut") {
        this.handleCommand(1);
      }
    },

    // 跳转我的信息页面
    jumpMeInfo() {
      this.$router.push({
        name: "oemBasic",
      });
    },

    // 左侧收回
    handHui() {
      console.log("eee");
      this.$emit("fatherMethod");
      this.newBool = !this.newBool;
    },

    //修改密码
    setPass() {
      this.bools = true;
    },
    // 修改密码框影藏
    hideBox() {
      this.bools = false;
    },
    // backHome() {
    //   this.$router.push({
    //     path: "/",
    //   });
    // },
    submit() {
      var re = /(\w)*(\w)\2{2}(\w)*/g;
      var regex = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,20}/;
      // alert(this.newPsw.length)
      var cc = /^(?=.*?[a-z)(?=.*>[A-Z])(?=.*?[0-9])[a-zA_Z0-9]{8,20}$/;
      // alert(cc.test(this.newPsw))
      if (
        this.newPsw == "" ||
        this.newPsw.length < 8 ||
        this.newPsw.length > 20
      ) {
        layer.open({
          content: "密码长度最少为8位最多为20位",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      } else if (!cc.test(this.newPsw)) {
        // alert("必须包含数字和字母")
        layer.open({
          content: "必须包含数字和字母",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      }else if (this.newPsw !== this.aginPsw) {
        layer.open({
          content: "两次输入密码不一致",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      } else if (this.newPsw == this.title) {
        // alert("新密码不能和用户名相同")
        layer.open({
          content: "新密码不能和用户名相同",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      } else if (this.nowPsw == this.newPsw) {
        layer.open({
          content: "新密码不能和旧密码相同",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      } else {
        let uid = localStorage.getItem("uid");
        let userName = localStorage.username;
        var data1 = {};
        data1.officeUid = uid; //登录人的uid
        data1.loginName = userName; //登录人的账号  也就是手机号
        data1.password = this.nowPsw; //当前登录密码
        data1.newPassword = this.newPsw; //设置的新密码
        console.log(data1);
        var _this = this;
        axios
          .post("/api/sys/user/updatePassWord", data1)
          .then((res) => {
            console.log(res);
            if (res.data.code == "0000") {
              localStorage.clear();
              _this.$router.push({ path: "/" });
            } else {
              _this.$alert(res.data.msg, "提示", {
                confirmButtonText: "确定",
              });
            }
          })
          .catch((err) => {
            console.log("失败");
          });
      }
    },
    handleClose(done) {
      this.dialogVisible = false;
    },
    LxStr(str) {
      var arr = str.split("");
      var flag = true;
      for (var i = 1; i < arr.length - 1; i++) {
        var firstIndex = arr[i - 1].charCodeAt();
        var secondIndex = arr[i].charCodeAt();
        var thirdIndex = arr[i + 1].charCodeAt();
        thirdIndex - secondIndex == 1;
        secondIndex - firstIndex == 1;
        if (thirdIndex - secondIndex == 1 && secondIndex - firstIndex == 1) {
          flag = false;
        }
      }
      if (!flag) {
        $("#message_").text("您的工号为弱口令密码，请修改密码后登录！");
        return flag;
      }
      return flag;
    },
    cales() {
      this.bools = false;
    },
    handleCommand(command) {
      // alert("发生了点击")
      if (command == 1) {
        const h = this.$createElement;
        this.$msgbox({
          title: "提示",
          message: h("p", null, [h("span", null, "是否继续退出? ")]),
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: (action, instance, done) => {
            console.log(action);
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "执行中...";
              setTimeout(() => {
                done();
                this.$router.push({
                  path: "/",
                  redirect: { name: "login" },
                });
                localStorage.removeItem("uid");
                localStorage.removeItem("jurisdiction");
                localStorage.removeItem("name");
                localStorage.removeItem("token");
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 300);
            } else {
              done();
            }
          },
        }).then((action) => {
          layer.open({
            content: "您已退出登录",
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
          // this.$message({
          //   type: "info",
          //   message: "您已退出登录",
          // });
        });
      }
    },
    handleClose() {},
  },
  created() {
    this.name = localStorage.getItem("name");
    this.phone = localStorage.getItem("username");
    this.jurisdiction = localStorage.getItem("jurisdiction");
    // 获取用户名
    this.topUserName = localStorage.getItem("sysUserName");
    // 获取邀请码
    this.developCode = localStorage.getItem("developCode");
    // 获取认证状态
    this.authenticationStatus = localStorage.getItem("authenticationStatus");
  },
};
</script>

<style scoped>
.warppers {
  width: 600px;
  height: 400px;
  position: fixed;
  left: 50%;
  top: 50%;
  background: white;
  transform: translate(-50%, -50%);
  z-index: 9999999999;
  box-sizing: border-box;
  padding-top: 50px;
  padding-bottom: 50px;
}
.setPsw {
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
  display: none;
}
.boxer {
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
  position: fixed;
  z-index: 99999999;
}

.headbox6_10_span {
  display: inline-block;
  font-size: 25px;
  color: white;
  cursor: pointer;
  float: left;
  position: relative;
  margin-top: 13px;
  margin-left: 30px;
}
.headbox6_10 {
  width: calc(100% - 200px);
  height: 50px;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
  float: left;
  position: fixed;
  top: 0;
  z-index: 10 !important;
}
.headboxcont6_10[data-v-29e8c3c6] {
  width: auto !important;
}
.titlse {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.headboximg6_10 {
  width: 96px;
  height: 48px;
  float: left;
  margin-top: 4px;
  margin-left: 30px;
}
.headboxcont6_10 {
  height: 56px;
  line-height: 56px;
  float: right;
}
.el-container.is-vertical >>> .el-header {
  padding: 0;
}
.headbox6_10 .el-dropdown {
  display: block;
}
.headbox6_10 .el-dropdown-link {
  cursor: pointer;
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
}
.el-container.is-vertical >>> .el-header {
  padding: 0;
}
.singOut {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #545c75;
  margin-right: 20px;
}
.titlse {
  color: white;
}
.rights {
  display: flex;
  float: right;
  height: 100%;
  align-items: center;
}
.pswList {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.lable {
  font-size: 18px;
  margin-right: 20px;
  width: 100px;
  text-align: right;
}
.btnGroup {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}
.requirement {
  width: 100%;
  padding-left: 162px;
  box-sizing: border-box;
}
.requirement > p {
  font-size: 14px;
}
.active {
  width: 100% !important;
}
/deep/ .v-modal {
  display: none !important;
}
.contents {
  font-size: 18px;
  margin-left: 20px;
  font-weight: 400;
}
.kuang {
  width: 300px !important;
}
/deep/ .kuang .el-input__inner {
  width: 300px !important;
}
.authenticationStatus {
  display: flex;
}
.subTitle {
  display: block;
  color: white;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  padding: 0px 5px;
}
.success {
  background: rgb(245, 108, 108);
}
.fail {
  background: rgb(86, 187, 138);
}
/deep/ .el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  color: black;
}
.lines {
  border-bottom: 1px solid #ebeef5 !important;
}
.headers {
  display: flex;
  align-items: center;
}
.txtLine {
  white-space: nowrap;
  /*空白不换行*/
  overflow: hidden;
  /*溢出隐藏*/
  text-overflow: ellipsis;
  /*显示省略号*/
}
</style>
